<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用指南 - 教材资源管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .hover-scale {
                @apply transition-transform duration-300 hover:scale-105;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .guide-active {
                @apply border-primary bg-primary/5;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <a href="#" class="text-xl font-bold text-primary flex items-center">
                    <i class="fa fa-book mr-2"></i>
                    <span>教材资源管理系统</span>
                </a>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">教材版本</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">统计分析</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助中心</a>
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">系统设置</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索帮助文档..." 
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>
                
                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 移动端搜索框 -->
    <div class="md:hidden p-3 bg-white border-t border-gray-100">
        <div class="relative">
            <input type="text" placeholder="搜索帮助文档..." 
                   class="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
    </div>

    <div class="flex flex-1 overflow-hidden">
        <!-- 左侧边栏 - 帮助文档导航 -->
        <aside id="sidebar" class="w-64 bg-white shadow-md transform -translate-x-full lg:translate-x-0 fixed lg:static h-full z-40 transition-transform duration-300 ease-in-out overflow-y-auto scrollbar-hide">
            <div class="p-4 border-b">
                <h2 class="font-bold text-lg mb-3">帮助中心</h2>
                
                <div class="space-y-1">
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-question-circle mr-2"></i>常见问题
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg bg-primary/10 text-primary font-medium">
                        <i class="fa fa-book mr-2"></i>使用指南
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-film mr-2"></i>视频教程
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-file-text-o mr-2"></i>API文档
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-users mr-2"></i>社区交流
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <i class="fa fa-shield mr-2"></i>安全中心
                    </a>
                </div>
            </div>
            
            <!-- 使用指南分类 -->
            <div class="p-4">
                <h3 class="font-medium text-sm text-gray-500 mb-2">使用指南分类</h3>
                <div class="space-y-1">
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-primary mr-2"></span>
                        系统概述
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg bg-primary/5 text-primary border-l-2 border-primary">
                        <span class="inline-block w-2 h-2 rounded-full bg-primary mr-2"></span>
                        教材版本管理
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        章节与知识点管理
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        数据导入导出
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        用户与权限管理
                    </a>
                    <a href="#" class="block py-2 px-3 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors">
                        <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                        系统配置
                    </a>
                </div>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
            <div class="container mx-auto">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <a href="#" class="hover:text-primary">首页</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">帮助中心</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <span class="text-primary">使用指南</span>
                </div>
                
                <!-- 内容标题区 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">使用指南</h2>
                    <p class="text-gray-500 mt-1">了解如何使用我们的系统来管理教材资源和提高教学效率</p>
                </div>
                
                <!-- 搜索区域 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in">
                    <div class="text-center mb-4">
                        <h3 class="font-bold text-lg">查找使用指南</h3>
                        <p class="text-gray-500 mt-1">搜索特定主题的使用指南或浏览以下分类</p>
                    </div>
                    
                    <div class="relative max-w-2xl mx-auto">
                        <input type="text" placeholder="输入关键词搜索..." 
                               class="w-full pl-12 pr-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all text-lg">
                        <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-xl"></i>
                        <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white px-4 py-1.5 rounded-lg hover:bg-primary/90 transition-colors">
                            搜索
                        </button>
                    </div>
                    
                    <div class="flex flex-wrap justify-center gap-2 mt-6">
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            系统概述
                        </a>
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            教材版本管理
                        </a>
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            章节结构
                        </a>
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            知识点关联
                        </a>
                        <a href="#" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm text-gray-700 transition-colors">
                            数据导入导出
                        </a>
                    </div>
                </div>
                
                <!-- 指南内容 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in" style="animation-delay: 0.1s">
                    <div class="flex flex-col md:flex-row md:items-start justify-between mb-6">
                        <div>
                            <h3 class="font-bold text-xl">教材版本管理</h3>
                            <p class="text-gray-500 mt-1">学习如何创建、编辑和管理教材版本</p>
                        </div>
                        <div class="mt-4 md:mt-0 flex space-x-2">
                            <button class="flex items-center text-gray-600 hover:text-primary transition-colors">
                                <i class="fa fa-print mr-1"></i> 打印
                            </button>
                            <button class="flex items-center text-gray-600 hover:text-primary transition-colors">
                                <i class="fa fa-share-alt mr-1"></i> 分享
                            </button>
                            <button class="flex items-center text-gray-600 hover:text-primary transition-colors">
                                <i class="fa fa-star-o mr-1"></i> 收藏
                            </button>
                        </div>
                    </div>
                    
                    <!-- 指南内容区 -->
                    <div class="prose max-w-none">
                        <h4 class="font-bold text-lg mb-3">概述</h4>
                        <p class="mb-4">教材版本管理是系统的核心功能之一，允许管理员创建、编辑和管理不同版本的教材内容。通过该功能，您可以建立完整的教材体系，设置章节结构，并关联相应的知识点。</p>
                        
                        <div class="bg-gray-50 p-4 rounded-lg mb-6">
                            <div class="flex items-start">
                                <div class="text-primary mr-3 mt-0.5">
                                    <i class="fa fa-info-circle text-xl"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-gray-800">版本控制说明</h5>
                                    <p class="text-gray-600 mt-1">系统支持同一教材的多个版本管理，您可以创建新版本、比较版本差异，并随时恢复到历史版本。每个版本都有独立的章节结构和知识点关联。</p>
                                </div>
                            </div>
                        </div>
                        
                        <h4 class="font-bold text-lg mb-3">创建新教材版本</h4>
                        <p class="mb-3">创建新教材版本的步骤如下：</p>
                        
                        <div class="space-y-4 mb-6">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold mr-3">1</div>
                                <div>
                                    <h5 class="font-medium">访问教材管理页面</h5>
                                    <p class="text-gray-600 mt-1">在左侧导航栏中，点击"教材版本"选项，进入教材管理页面。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold mr-3">2</div>
                                <div>
                                    <h5 class="font-medium">点击"添加新版本"按钮</h5>
                                    <p class="text-gray-600 mt-1">在教材管理页面右上角，点击"添加新版本"按钮，弹出教材创建表单。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold mr-3">3</div>
                                <div>
                                    <h5 class="font-medium">填写基本信息</h5>
                                    <p class="text-gray-600 mt-1">在表单中填写教材基本信息，包括教材名称、所属学科、适用年级、出版社、ISBN等信息。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold mr-3">4</div>
                                <div>
                                    <h5 class="font-medium">上传教材封面（可选）</h5>
                                    <p class="text-gray-600 mt-1">点击"上传封面"按钮，选择本地图片文件作为教材封面。支持JPG、PNG等常见图片格式。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold mr-3">5</div>
                                <div>
                                    <h5 class="font-medium">设置章节结构</h5>
                                    <p class="text-gray-600 mt-1">您可以选择手动添加章节或导入已有章节结构。点击"添加章节"按钮，输入章节名称和描述，支持多级章节嵌套。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold mr-3">6</div>
                                <div>
                                    <h5 class="font-medium">保存并启用</h5>
                                    <p class="text-gray-600 mt-1">填写完所有信息后，点击"保存并启用"按钮完成教材版本创建。新创建的教材版本将显示在教材列表中。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-blue-50 p-4 rounded-lg mb-6">
                            <div class="flex items-start">
                                <div class="text-blue-600 mr-3 mt-0.5">
                                    <i class="fa fa-lightbulb-o text-xl"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-blue-800">提示</h5>
                                    <p class="text-blue-700 mt-1">您可以通过导入功能快速创建章节结构。系统支持从Excel、Word或JSON文件导入章节信息，大大提高工作效率。</p>
                                </div>
                            </div>
                        </div>
                        
                        <h4 class="font-bold text-lg mb-3">编辑教材版本</h4>
                        <p class="mb-3">对于已创建的教材版本，您可以进行编辑和修改：</p>
                        
                        <div class="space-y-4 mb-6">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-3">1</div>
                                <div>
                                    <h5 class="font-medium">选择要编辑的教材</h5>
                                    <p class="text-gray-600 mt-1">在教材列表中，找到要编辑的教材版本，点击右侧的"编辑"按钮。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-3">2</div>
                                <div>
                                    <h5 class="font-medium">修改基本信息</h5>
                                    <p class="text-gray-600 mt-1">在编辑页面中，可以修改教材的基本信息，如名称、学科、出版社等。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-3">3</div>
                                <div>
                                    <h5 class="font-medium">调整章节结构</h5>
                                    <p class="text-gray-600 mt-1">通过章节管理区域，可以添加、删除或调整章节顺序，也可以编辑章节的详细信息。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center font-bold mr-3">4</div>
                                <div>
                                    <h5 class="font-medium">保存修改</h5>
                                    <p class="text-gray-600 mt-1">完成所有修改后，点击页面底部的"保存"按钮，系统将保存您的更改。</p>
                                </div>
                            </div>
                        </div>
                        
                        <h4 class="font-bold text-lg mb-3">版本对比</h4>
                        <p class="mb-3">系统提供版本对比功能，帮助您查看不同版本之间的差异：</p>
                        
                        <div class="space-y-4 mb-6">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-accent text-white flex items-center justify-center font-bold mr-3">1</div>
                                <div>
                                    <h5 class="font-medium">打开版本对比页面</h5>
                                    <p class="text-gray-600 mt-1">在教材编辑页面中，找到"版本对比"区域，点击"开始对比"按钮。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-accent text-white flex items-center justify-center font-bold mr-3">2</div>
                                <div>
                                    <h5 class="font-medium">选择要对比的版本</h5>
                                    <p class="text-gray-600 mt-1">从下拉菜单中选择要与当前版本进行对比的历史版本。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-accent text-white flex items-center justify-center font-bold mr-3">3</div>
                                <div>
                                    <h5 class="font-medium">查看对比结果</h5>
                                    <p class="text-gray-600 mt-1">系统将以可视化方式显示两个版本之间的差异，包括新增、修改和删除的章节及知识点。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-green-50 p-4 rounded-lg mb-6">
                            <div class="flex items-start">
                                <div class="text-green-600 mr-3 mt-0.5">
                                    <i class="fa fa-check-circle text-xl"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-green-800">最佳实践</h5>
                                    <ul class="list-disc pl-5 mt-1 space-y-1 text-green-700">
                                        <li>在进行重大修改前，建议创建新的版本以保留历史记录</li>
                                        <li>每次版本更新时，填写详细的更新说明，方便后续查看</li>
                                        <li>定期对比版本差异，了解教材更新情况</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <h4 class="font-bold text-lg mb-3">停用与删除</h4>
                        <p class="mb-3">如果某个教材版本不再使用，您可以选择停用或删除它：</p>
                        
                        <div class="space-y-4 mb-6">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-warning text-white flex items-center justify-center font-bold mr-3">1</div>
                                <div>
                                    <h5 class="font-medium">停用教材版本</h5>
                                    <p class="text-gray-600 mt-1">在教材列表中，找到要停用的教材版本，点击"停用"按钮。停用后的教材将不再显示在默认列表中，但仍可在历史版本中查看。</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-full bg-danger text-white flex items-center justify-center font-bold mr-3">2</div>
                                <div>
                                    <h5 class="font-medium">删除教材版本</h5>
                                    <p class="text-gray-600 mt-1">如需彻底删除某个版本，点击"删除"按钮。删除前系统会要求确认，并提示该操作不可撤销。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-red-50 p-4 rounded-lg">
                            <div class="flex items-start">
                                <div class="text-red-600 mr-3 mt-0.5">
                                    <i class="fa fa-exclamation-triangle text-xl"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-red-800">重要提示</h5>
                                    <p class="text-red-700 mt-1">删除教材版本将永久删除该版本下的所有章节和知识点数据，请谨慎操作。建议在删除前先备份重要数据。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相关指南 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in" style="animation-delay: 0.2s">
                    <h3 class="font-bold text-lg mb-4">相关指南</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <!-- 相关指南 1 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-sitemap"></i>
                                </div>
                                <h4 class="font-medium ml-3">章节结构管理</h4>
                            </div>
                            <p class="text-gray-600 text-sm mt-3 mb-3">学习如何创建和管理教材的章节结构，包括添加、编辑和删除章节。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                查看指南
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                        
                        <!-- 相关指南 2 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-link"></i>
                                </div>
                                <h4 class="font-medium ml-3">知识点关联</h4>
                            </div>
                            <p class="text-gray-600 text-sm mt-3 mb-3">了解如何将知识点与教材章节关联，建立完整的知识体系。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                查看指南
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                        
                        <!-- 相关指南 3 -->
                        <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow hover-scale">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <i class="fa fa-file-excel-o"></i>
                                </div>
                                <h4 class="font-medium ml-3">数据导入导出</h4>
                            </div>
                            <p class="text-gray-600 text-sm mt-3 mb-3">学习如何导入现有教材数据和导出系统中的教材内容。</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                查看指南
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 反馈区域 -->
                <div class="bg-white rounded-xl shadow-sm p-6 fade-in" style="animation-delay: 0.3s">
                    <h3 class="font-bold text-lg mb-4">帮助改进此指南</h3>
                    <p class="text-gray-600 mb-4">您对本指南的反馈将帮助我们改进内容，提供更好的使用体验。</p>
                    
                    <div class="flex flex-wrap gap-3 mb-4">
                        <button class="flex items-center px-4 py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors">
                            <i class="fa fa-thumbs-up mr-2"></i> 内容有帮助
                        </button>
                        <button class="flex items-center px-4 py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors">
                            <i class="fa fa-thumbs-down mr-2"></i> 内容无帮助
                        </button>
                        <button class="flex items-center px-4 py-2 border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition-colors">
                            <i class="fa fa-pencil mr-2"></i> 建议编辑
                        </button>
                    </div>
                    
                    <div class="mt-4">
                        <label for="feedback" class="block text-gray-700 font-medium mb-2">详细反馈（可选）</label>
                        <textarea id="feedback" rows="3" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="请提供您的反馈或建议..."></textarea>
                        <button class="mt-3 bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                            提交反馈
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2025 教材资源管理系统. 保留所有权利.
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i> 隐私政策
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i> 使用条款
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-envelope-o mr-1"></i> 联系我们
                    </a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });
        
        // FAQ 折叠功能
        document.querySelectorAll('.faq-question').forEach(question => {
            question.addEventListener('click', () => {
                const answer = question.nextElementSibling;
                const icon = question.querySelector('i');
                
                // 切换回答的显示/隐藏
                answer.classList.toggle('hidden');
                
                // 切换图标旋转
                if (answer.classList.contains('hidden')) {
                    icon.classList.remove('fa-angle-up');
                    icon.classList.add('fa-angle-down');
                } else {
                    icon.classList.remove('fa-angle-down');
                    icon.classList.add('fa-angle-up');
                }
                
                // 更新活动状态
                const faqItem = question.parentElement;
                if (!answer.classList.contains('hidden')) {
                    faqItem.classList.add('faq-active');
                } else {
                    faqItem.classList.remove('faq-active');
                }
            });
        });
        
        // 滚动时导航栏效果
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }
        });
        
        // 图片懒加载
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = [].slice.call(document.querySelectorAll("img"));
            
            if ("IntersectionObserver" in window) {
                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
                    entries.forEach(function(entry) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            lazyImage.classList.add("fade-in");
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });
                
                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            }
        });
    </script>
</body>
</html>
    